import{d as e,M as n,A as r,h as d}from"./Anchors-CRD96j4l.js";import{D as c,a as o}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const s={path:"/base/popover",name:"popover",title:"Popover 气泡提示"};function l(i){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...i.components};return n(d,{children:[n("div",{class:"sys-ctx-main-left",children:[n(t.h1,{id:"sp-",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:e(t.span,{className:"icon icon-link"})}),s.title]}),n(t.h2,{id:"sp-demos",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:e(t.span,{className:"icon icon-link"})}),"代码演示 "]}),e(c,{}),e(o,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Popover, Space } from "cui-solid"

export default () => {
    return <Space dir="v">
        <div>
            <Popover content="over Content">
                <span>OVER</span>
            </Popover>
        </div>
        <div>
            <Popover content="click Content" trigger="click">
                <span>Click</span>
            </Popover>
        </div>
    </Space>
}`,scopes:void 0,children:e(t.p,{children:"支持两种种触发方式：鼠标悬停、点击。默认是鼠标悬停。"})}),e(o,{id:"align",title:"位置",src:"2align.demo.tsx",code:`import { BothSide, Button, Popover, Space } from "cui-solid"

export default () => {
    const style = {width: '120px', 'text-align': 'center'}
    return <Space dir="v" align="center">
        <Space dir="v" style={{width: '500px'}}>
            <Space dir="h" align="center" justify="center" size={30}>
                <Popover content="Content" trigger="click" align="topLeft" arrow>
                    <Button style={style}>Top Left</Button>
                </Popover>
                <Popover content="Content" trigger="click" align="top" arrow>
                    <Button style={style}>Top Center</Button>
                </Popover>
                <Popover content="Content" trigger="click" align="topRight" arrow>
                    <Button style={style}>Top Right</Button>
                </Popover>
            </Space>
            <BothSide>
                <Space dir="v">
                    <Popover content={<div><div>Content</div><div>Content</div><div>Content</div></div>} trigger="click" align="leftTop" arrow>
                        <Button>Left Top</Button>
                    </Popover>
                    <Popover content={<div><div>Content</div><div>Content</div><div>Content</div></div>} trigger="click" align="left" arrow>
                        <Button>Left Center</Button>
                    </Popover>
                    <Popover content={<div><div>Content</div><div>Content</div><div>Content</div></div>} trigger="click" align="leftBottom" arrow>
                        <Button>Left Bottom</Button>
                    </Popover>
                </Space>
                <Space dir="v">
                    <Popover content={<div><div>Content</div><div>Content</div><div>Content</div></div>} trigger="click" align="rightTop" arrow>
                        <Button>Right Top</Button>
                    </Popover>
                    <Popover content={<div><div>Content</div><div>Content</div><div>Content</div></div>} trigger="click" align="right" arrow>
                        <Button>Right Center</Button>
                    </Popover>
                    <Popover content={<div><div>Content</div><div>Content</div><div>Content</div></div>} trigger="click" align="rightBottom" arrow>
                        <Button>Right Bottom</Button>
                    </Popover>
                </Space>
            </BothSide>
            <Space dir="h" align="center" justify="center" size={30}>
                <Popover content="Content" trigger="click" align="bottomLeft" arrow>
                    <Button style={style}>Bottom Left</Button>
                </Popover>
                <Popover content="Content" trigger="click" align="bottom" arrow>
                    <Button style={style}>Bottom Center</Button>
                </Popover>
                <Popover content="Content" trigger="click" align="bottomRight" arrow>
                    <Button style={style}>Bottom Right</Button>
                </Popover>
            </Space>
        </Space>
    </Space>
}`,scopes:void 0,children:e(t.p,{children:"支持12个不同的方向显示，具体配置可查看API。"})}),e(o,{id:"controller",title:"可控",src:"3controller.demo.tsx",code:`import { Button, Icon, Popover, Space, Text } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [visible, setVisible] = createSignal(false);

    return <Space dir="v">
        <div>
            <Popover visible={[visible, setVisible]} theme="light" content={<div>
                <div>content!content!content!</div>
                <div>content!content!content!</div>
                <div>content!content!content!</div>
                <div>content!content!content!</div>
                <Button type="text" size="small" onClick={() => {
                    setVisible(false);
                }}>Close</Button>
            </div>} arrow trigger="click">
                <span>Click</span>
            </Popover>

            <div>
                <Popover theme="light" align="topRight" content={<Space dir="v" style={{width: '150px'}}>
                    <div><Icon name="help-circle" color="var(--cui-warning-color)"/> <Text>确认用户信息</Text></div>
                    <div>是否确认删除该信息</div>
                </Space>} arrow confirm onOk={() => {
                    console.log(1);
                    return new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(false);
                        }, 2000)
                    });
                }}>
                    <span>confirm</span>
                </Popover>
            </div>
        </div>
    </Space>
}`,scopes:void 0,children:n(t.p,{children:[e(t.code,{className:"sp-inline-code",children:"visible"})," 属性为可控属性"]})}),n(t.h2,{id:"props",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:e(t.span,{className:"icon icon-link"})}),"属性 "]}),n(t.table,{className:"sp-table",children:[e(t.thead,{children:n(t.tr,{children:[e(t.th,{style:{textAlign:"left"},children:"属性"}),e(t.th,{style:{textAlign:"left"},children:"说明"}),e(t.th,{style:{textAlign:"left"},children:"类型"}),e(t.th,{style:{textAlign:"left"},children:"默认值"})]})}),n(t.tbody,{children:[n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"align"}),e(t.td,{style:{textAlign:"left"},children:"位置"}),e(t.td,{style:{textAlign:"left"},children:"top | bottom | left | right | topLeft | topRight | bottomLeft | bottomRight | leftTop | leftBottom | rightTop | rightBottom"}),e(t.td,{style:{textAlign:"left"},children:"right"})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"trigger"}),e(t.td,{style:{textAlign:"left"},children:"触发条件"}),e(t.td,{style:{textAlign:"left"},children:"hover | click"}),e(t.td,{style:{textAlign:"left"},children:"hover"})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"disabled"}),e(t.td,{style:{textAlign:"left"},children:"禁用状态"}),e(t.td,{style:{textAlign:"left"},children:"boolean"}),e(t.td,{style:{textAlign:"left"}})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"arrow"}),e(t.td,{style:{textAlign:"left"},children:"显示箭头"}),e(t.td,{style:{textAlign:"left"},children:"boolean"}),e(t.td,{style:{textAlign:"left"}})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"theme"}),e(t.td,{style:{textAlign:"left"},children:"主题"}),e(t.td,{style:{textAlign:"left"},children:"string"}),e(t.td,{style:{textAlign:"left"}})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"hideDelay"}),e(t.td,{style:{textAlign:"left"},children:"隐藏延迟"}),e(t.td,{style:{textAlign:"left"},children:"number"}),e(t.td,{style:{textAlign:"left"},children:"200"})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"content"}),e(t.td,{style:{textAlign:"left"},children:"提示内容"}),e(t.td,{style:{textAlign:"left"},children:"string | JSXElement"}),e(t.td,{style:{textAlign:"left"}})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"visible"}),e(t.td,{style:{textAlign:"left"},children:"显示隐藏控制"}),e(t.td,{style:{textAlign:"left"},children:"Signal"}),e(t.td,{style:{textAlign:"left"}})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"onOpen"}),e(t.td,{style:{textAlign:"left"},children:"打开回调函数"}),e(t.td,{style:{textAlign:"left"},children:"Function"}),e(t.td,{style:{textAlign:"left"}})]})]})]})]}),`
`,`
`,`
`,e(r,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"align",title:"位置",src:"2align.demo.tsx"},{id:"controller",title:"可控",src:"3controller.demo.tsx"},{id:"props",depth:2,title:"属性"}]})]})}function h(i={}){const{wrapper:t}=i.components||{};return t?e(t,{...i,children:e(l,{...i})}):l(i)}export{h as default,s as frontmatter};
